<template>
	<view class="payment-container">
		<view class="order-info">
			<view class="order-title">订单信息</view>
			<view class="info-item">
				<text class="label">订单编号</text>
				<text class="value">{{ orderNo }}</text>
			</view>
			<view class="info-item">
				<text class="label">课程金额</text>
				<text class="value">¥{{ amount }}</text>
			</view>
			<view v-if="selectedCoupon" class="info-item">
				<text class="label">优惠券</text>
				<text class="value discount">-¥{{ calculateCouponDiscount() }}</text>
			</view>
			<view class="info-item">
				<text class="label">支付金额</text>
				<text class="value price">¥{{ finalAmount }}</text>
			</view>
		</view>
		
		<!-- 优惠券选择区域 -->
		<view class="coupon-section">
			<view class="section-title">优惠券</view>
			<view class="coupon-selector" @tap="showCouponModal">
				<view class="coupon-info">
					<view v-if="selectedCoupon" class="selected-coupon">
						<text class="coupon-name">{{ selectedCoupon.title }}</text>
						<text class="coupon-discount">-¥{{ calculateCouponDiscount() }}</text>
					</view>
					<view v-else class="no-coupon">
						<text class="coupon-placeholder">选择优惠券</text>
					</view>
				</view>
				<text class="arrow">></text>
			</view>
		</view>

		<view class="payment-methods">
			<view class="section-title">选择支付方式</view>
			<view class="method-list">
				<view class="method-item" @tap="selectPayMethod('alipay')" :class="{ active: selectedMethod === 'alipay' }">
					<image src="http://101.200.154.121:19000/teacher-manage-static/static/alipay-icon.png" mode="aspectFit" class="method-icon"></image>
					<text class="method-name">支付宝</text>
					<view class="radio-btn"></view>
				</view>
				<!--  暂未开放  -->
				<view class="method-item" @tap="selectPayMethod('wxpay')" :class="{ active: selectedMethod === 'wxpay', disabled: true }">
					<image src="/static/wxpay-icon.png" mode="aspectFit" class="method-icon"></image>
					<text class="method-name">微信支付</text>
					<text class="status-tag">暂未开通</text>
					<view class="radio-btn"></view>
				</view>
			</view>
		</view>
		
		<button class="confirm-btn" @tap="handlePayment" :disabled="!isValid || loading || selectedMethod === 'wxpay'">
			{{ loading ? '处理中...' : `确认支付 ¥${finalAmount}` }}
		</button>

		<!-- 优惠券选择弹窗 -->
		<view v-if="showCouponList" class="coupon-modal" @tap="hideCouponModal">
			<view class="coupon-modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">选择优惠券</text>
					<text class="close-btn" @tap="hideCouponModal">×</text>
				</view>
				<scroll-view class="coupon-list" scroll-y>
					<view v-if="availableCoupons.length === 0" class="empty-tip">
						暂无可用优惠券
					</view>
					<view v-else>
						<!-- 不使用优惠券选项 -->
						<view class="coupon-item" :class="{ active: !selectedCoupon }" @tap="selectCoupon(null)">
							<view class="coupon-left no-coupon-left">
								<text class="no-coupon-text">不使用</text>
							</view>
							<view class="coupon-right">
								<view class="coupon-info">
									<text class="title">不使用优惠券</text>
								</view>
								<view class="radio-btn" :class="{ checked: !selectedCoupon }"></view>
							</view>
						</view>

						<!-- 优惠券列表 -->
						<view
							v-for="(coupon, index) in availableCoupons"
							:key="index"
							class="coupon-item"
							:class="{
								active: selectedCoupon && selectedCoupon.id === coupon.id,
								disabled: !canUseCoupon(coupon)
							}"
							@tap="selectCoupon(coupon)"
						>
							<view class="coupon-left" :class="{ disabled: !canUseCoupon(coupon) }">
								<text class="amount">
									<text class="symbol">¥</text>
									{{ coupon.type === 1 ? coupon.amount : (coupon.amount / 10).toFixed(1) }}
								</text>
								<text class="condition">满{{ coupon.minSpend }}可用</text>
							</view>
							<view class="coupon-right">
								<view class="coupon-info">
									<text class="title">{{ coupon.title }}</text>
									<text class="desc">{{ coupon.description }}</text>
									<text class="time">{{ formatCouponDate(coupon.endTime) }}到期</text>
								</view>
								<view class="radio-btn" :class="{ checked: selectedCoupon && selectedCoupon.id === coupon.id }"></view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { payApi } from '@/api/pay.js'
import { orderApi } from '@/api/order.js'
import { couponApi } from '@/api/coupon.js'

export default {
	data() {
		return {
			orderNo: '',
			orderId: '',  // 这个是新加的
			amount: 0,
			selectedMethod: 'alipay',
			orderInfo: {},
			paymentTimer: null,
			isValid: false,
			loading: false,
			userId: '',
			courseId: '',
			teacherId: '',
			appointmentId: '',
			options: {},
			selectedCoupon: null,
			courseTitle:'',
			globalUserinfo:{},
			availableCoupons: [],
			showCouponList: false
		}
	},

	computed: {
		// 计算最终支付金额（扣除优惠券折扣）
		finalAmount() {
			if (!this.selectedCoupon) {
				return this.amount
			}
			const discount = this.calculateCouponDiscount()
			return Math.max(0, this.amount - discount)
		}
	},

	onLoad(options) {
		console.log("支付页面加载开始 - options:", JSON.stringify(options));
		this.orderId = options.orderId;
		const app = getApp()
		const gUserInfo = uni.getStorageSync('userInfo');
		console.log("获取全局用户状态："+JSON.stringify(gUserInfo))
		this.globalUserinfo = gUserInfo || {};
		console.log("globalUserinfo:="+JSON.stringify(this.globalUserinfo))
		if (!options) {
			uni.showToast({
				title: '订单参数缺失',
				icon: 'none'
			})
			return
		}

		console.log('支付页收到参数:', options);
		
		// 从已存在的订单加载 if (options.orderNo && !options.appointmentId) { todo
		// if (options.courseId) {
		if (options.orderNo && !options.appointmentId) { 
			console.log("订单号存在，预约ID不存在，进入分支1");
			this.orderNo = options.orderNo;
			this.orderId = options.orderId;  // 这个是新加的
			this.amount = options.amount ? parseFloat(options.amount) : 0;
			this.userId = options.userId || this.globalUserinfo.id || '';
			this.courseId = options.courseId || '';
			this.teacherId = options.teacherId || '';
			this.appointmentId = options.appointmentId || '';
			this.options = options;
			this.courseTitle = options.courseTitle || '';
			
			// 在这里设置orderInfo对象，确保validateOrderInfo可以正确工作
			this.orderInfo = {
				orderNo: options.orderNo || '',
				amount: options.amount ? parseFloat(options.amount) : 0,
				userId: this.userId,
				courseId: this.courseId,
				teacherId: this.teacherId,
				appointmentId: this.appointmentId,
				courseName: this.courseTitle,
				orderId: this.orderId,
				...options
			};
			console.log("分支1设置的orderInfo:", JSON.stringify(this.orderInfo));
			
			// 检查订单是否已支付
			this.checkOrderPaymentStatus();
			// 校验是否可以支付
			this.validateOrderInfo();
			// 不要提前return，让页面继续渲染
			// return;
		} else {
			console.log("进入分支2");
			// 确保有预约ID  源码if (!options.appointmentId) todo
			if (!options.orderId) {
				console.log("orderNo:" + this.orderNo)
				uni.showToast({
					title: '预约信息缺失',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack() // todo
				}, 1500)
				return
			}

			this.orderInfo = {
				orderNo: options.orderNo || '',
				amount: options.amount ? parseFloat(options.amount) : 0,
				userId: options.userId || this.globalUserinfo.id || '',
				courseId: options.courseId || '',
				teacherId: options.teacherId || '',
				appointmentId: options.appointmentId || '',
				courseName : options.courseTitle || '',
				orderId : options.orderId || '',
				...options
			}
			console.log("分支2设置的orderInfo:", JSON.stringify(this.orderInfo));

			this.orderNo = this.orderInfo.orderNo
			this.amount = this.orderInfo.amount
			this.userId = this.orderInfo.userId
			this.courseId = this.orderInfo.courseId
			this.teacherId = this.orderInfo.teacherId
			this.appointmentId = this.orderInfo.appointmentId
			this.options = options

			if (!this.validateOrderInfo()) {
				uni.showToast({
					title: '订单信息不完整',
					icon: 'none'
				})
			}
			
			
			// 如果已有订单号，检查订单是否已支付
			if (this.orderNo) {
				this.checkOrderPaymentStatus();
			}
		}

		// 这里添加一个强制设置isValid为true的选项，用于调试
		console.log("页面加载完成，最终isValid值:", this.isValid);

		// 加载用户可用优惠券
		this.loadAvailableCoupons();
	},
	
	onUnload() {
		if (this.paymentTimer) {
			clearInterval(this.paymentTimer)
		}
	},
	
	methods: {
		// 加载用户可用优惠券
		async loadAvailableCoupons() {
			try {
				if (!this.globalUserinfo.id) {
					console.log('用户ID不存在，无法加载优惠券');
					return;
				}

				const res = await couponApi.getAvailableCoupons(this.globalUserinfo.id);
				if (res && res.code === 200 && res.data) {
					// 过滤出未使用且未过期的优惠券
					this.availableCoupons = res.data.filter(coupon => {
						return coupon.status === 1 && new Date(coupon.endTime) > new Date();
					});
					console.log('加载到可用优惠券:', this.availableCoupons.length, '张');
				}
			} catch (error) {
				console.error('加载优惠券失败:', error);
			}
		},

		// 显示优惠券选择弹窗
		showCouponModal() {
			this.showCouponList = true;
		},

		// 隐藏优惠券选择弹窗
		hideCouponModal() {
			this.showCouponList = false;
		},

		// 选择优惠券
		selectCoupon(coupon) {
			if (coupon && !this.canUseCoupon(coupon)) {
				uni.showToast({
					title: '该优惠券不满足使用条件',
					icon: 'none'
				});
				return;
			}

			this.selectedCoupon = coupon;
			this.hideCouponModal();

			if (coupon) {
				uni.showToast({
					title: `已选择优惠券，优惠¥${this.calculateCouponDiscount()}`,
					icon: 'success'
				});
			}
		},

		// 检查优惠券是否可用
		canUseCoupon(coupon) {
			if (!coupon) return false;

			// 检查最低消费金额
			if (this.amount < coupon.minSpend) {
				return false;
			}

			// 检查是否过期
			if (new Date(coupon.endTime) <= new Date()) {
				return false;
			}

			// 检查状态
			if (coupon.status !== 1) {
				return false;
			}

			return true;
		},

		// 计算优惠券折扣金额
		calculateCouponDiscount() {
			if (!this.selectedCoupon) {
				return 0;
			}

			return couponApi.calculateDiscount(this.selectedCoupon, this.amount);
		},

		// 格式化优惠券日期
		formatCouponDate(dateStr) {
			const date = new Date(dateStr);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		},

		// 检查订单是否已支付
		async checkOrderPaymentStatus() {
			try {
				// 先检查本地存储中是否有记录
				if (this.orderNo) {
					try {
						const paidOrdersStr = uni.getStorageSync('paidOrders') || '{}';
						const paidOrders = JSON.parse(paidOrdersStr);
						
						if (paidOrders[this.orderNo] && paidOrders[this.orderNo].paid) {
							console.log('本地记录显示订单已支付:', this.orderNo);
							this.showPaidToast();
							return true;
						}
					} catch (error) {
						console.error('检查本地支付记录出错:', error);
					}
				}
				
				// 如果本地没有记录，则查询服务器
				this.loading = true;
				const res = await payApi.queryPayStatus(this.orderNo);
				this.loading = false;
				
				if (res && res.code === 200 && res.data) {
					// 如果订单已支付
					if (res.data.paid || res.data.status === 'TRADE_SUCCESS' || res.data.status === 'TRADE_FINISHED') {
						// 记录到本地存储
						this.recordOrderAsPaid();
						this.showPaidToast();
						return true;
					}
				}
				
				return false;
			} catch (error) {
				console.error('检查订单支付状态出错:', error);
				this.loading = false;
				return false;
			}
		},
		
		// 记录订单已支付
		recordOrderAsPaid() {
			if (!this.orderNo) return;
			
			try {
				const paidOrdersStr = uni.getStorageSync('paidOrders') || '{}';
				const paidOrders = JSON.parse(paidOrdersStr);
				
				paidOrders[this.orderNo] = {
					paid: true,
					time: new Date().getTime()
				};
				
				uni.setStorageSync('paidOrders', JSON.stringify(paidOrders));
				console.log('已记录订单支付状态:', this.orderNo);
			} catch (error) {
				console.error('记录订单支付状态失败:', error);
			}
		},
		
		// 显示已支付提示并跳转
		showPaidToast() {
			uni.showToast({
				title: '该订单已支付，无需重复支付',
				icon: 'none',
				duration: 2000
			});
			
			// 2秒后跳转到订单列表页
			setTimeout(() => {
				uni.redirectTo({
					url: '/pages/orders/list',
					fail: () => {
						// 如果跳转失败，尝试返回
						uni.navigateBack();
					}
				});
			}, 2000);
		},
		
		validateOrderInfo() {
			console.log("校验订单开始---")
			if (!this.orderInfo) {
				console.log("orderInfo不存在，返回false");
				return false
			}
			// 确保有用户ID
			if (!this.orderInfo.userId && this.globalUserinfo && this.globalUserinfo.id) {
				console.log("从全局用户信息补充userId");
				this.orderInfo.userId = this.globalUserinfo.id;
			}
			
			// 打印orderInfo
			console.log("打印orderinfo："+JSON.stringify(this.orderInfo))
		
			// const requiredFields = ['amount', 'userId', 'courseId', 'appointmentId']
			const requiredFields = ['amount', 'userId', 'courseId', 'orderId']
			
			// 单独检查每个必填字段
			requiredFields.forEach(field => {
				const value = this.orderInfo[field];
				console.log(`检查字段 ${field}: ${value}`);
				if (value === undefined || value === null || value === '') {
					console.log(`缺少必填字段: ${field}`);
				}
			});
			
			const isValid = requiredFields.every(field => {
				const value = this.orderInfo[field]
				return value !== undefined && value !== null && value !== ''
			})
			
			console.log("验证结果:", isValid);
			this.isValid = isValid 
			return isValid
		},
		
		selectPayMethod(method) {
			this.selectedMethod = method;
			
			// 如果选择了微信支付，显示提示
			if (method === 'wxpay') {
				uni.showToast({
					title: '微信支付功能暂未开通，请选择支付宝支付',
					icon: 'none',
					duration: 2000
				});
			}
		},
		
		async handlePayment() {
			if (!this.validateOrderInfo()) {
				uni.showToast({
					title: '订单信息不完整',
					icon: 'none'
				})
				return
			}
			
			// 如果选择了微信支付，提示并返回
			if (this.selectedMethod === 'wxpay') {
				uni.showToast({
					title: '微信支付功能暂未开通，请选择支付宝支付',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			
			if (this.loading) {
				return
			}
			
			// 如果已有订单号，先检查是否已支付
			if (this.orderNo) {
				const isPaid = await this.checkOrderPaymentStatus();
				if (isPaid) {
					return; // 如果已支付，不再继续处理
				}
			}
			
			this.loading = true
			
			try {
				// 从预约信息中获取课程名称
				const courseName = decodeURIComponent(this.options.kc || '')
				
				
				// 创建订单参数
				const params = {
					userId: this.globalUserinfo.id,
					courseId: this.courseId,
					teacherId: this.teacherId,
					couponId: this.selectedCoupon ? this.selectedCoupon.id : null,
					// appointmentId: this.appointmentId ? this.appointmentId : "",
					amount: this.finalAmount, // 使用优惠后的金额
					originalAmount: this.amount, // 原始金额
					// courseName: courseName,
					courseName : this.orderInfo.courseName,
					// 预约id
					// appointmentId : this.orderId
					appointmentId : this.orderId
				}
				
				console.log('创建订单参数:', params)
				// 创建订单
				let orderRes = {code:'',data:''};
				if(!this.orderNo){
					 orderRes = await orderApi.createOrder(params)
				
					if (!orderRes) {
						throw new Error('创建订单失败：服务器没有响应')
					}
				}
				
				
				if (this.orderId || (orderRes.code === 200 && orderRes.data)) {
					
					const orderNo = orderRes.data.orderNo || orderRes.data || this.orderNo
					console.log('创建订单成功，订单号:', orderNo)
					
					// 显示支付处理中提示
					uni.showLoading({
					     title: '准备支付...',
					     mask: true
					});
					
					
					
					// 调用支付接口
					const payRes = await payApi.createAlipayOrder({
						orderNo: orderNo,
						amount: this.finalAmount, // 使用优惠后的金额
						subject: courseName || '课程预约'
					})
					// 等待响应
					// timer = setTimeout(() => {
					// 			console.log("setTimeout");
					// }, 3000);
					// clearTimeout(timer)
					
					   // 隐藏加载提示
					    uni.hideLoading();
					
					if (!payRes) {
						throw new Error('调用支付接口失败：服务器没有响应')
					}
					console.log("支付宝订单返回值："+JSON.stringify(payRes))
					
					if (payRes.code == 200 && payRes.data) {
						// 根据不同环境处理支付
						// #ifdef H5
						// H5环境：直接跳转到支付宝页面
						window.open(payRes.data, '_blank');
						// #endif

						// #ifdef MP-WEIXIN
						// 小程序环境：使用web-view加载支付页面
						uni.navigateTo({
							url: `/pages/payment/webview?payUrl=${encodeURIComponent(payRes.data)}&orderNo=${orderNo}`
						});
						// #endif

						// #ifdef APP-PLUS
						// APP环境：使用系统浏览器打开支付页面
						plus.runtime.openURL(payRes.data);
						// #endif
					} else {
						// 支付宝订单创建失败
						uni.showModal({
							title: '支付失败',
							content: payRes.message || '创建支付订单失败，请稍后重试',
							showCancel: false,
							confirmText: '确定'
						});
					}
				} else {
					// 创建订单失败
					uni.showModal({
						title: '订单创建失败',
						content: orderRes.message || '创建订单失败，请检查网络连接后重试',
						showCancel: false,
						confirmText: '确定'
					});
				}
			} catch (error) {
				console.error('支付过程出错：', error);

				// 根据错误类型显示不同的提示
				let errorMessage = '支付过程中出现错误，请稍后重试';
				if (error.message && error.message.includes('网络')) {
					errorMessage = '网络连接异常，请检查网络后重试';
				} else if (error.message && error.message.includes('超时')) {
					errorMessage = '请求超时，请稍后重试';
				}

				uni.showModal({
					title: '支付失败',
					content: errorMessage,
					showCancel: true,
					cancelText: '取消',
					confirmText: '重试',
					success: (res) => {
						if (res.confirm) {
							// 用户选择重试
							this.handlePayment();
						}
					}
				});
			} finally {
				this.loading = false
			}
		},
		
		startCheckingPaymentStatus(orderNo) {
			let checkCount = 0
			const maxChecks = 20 // 最多检查1分钟
			let consecutiveErrors = 0
			const maxConsecutiveErrors = 3
			
			this.paymentTimer = setInterval(async () => {
				try {
					checkCount++
					if (checkCount > maxChecks) {
						clearInterval(this.paymentTimer)
						uni.showToast({
							title: '支付状态查询超时，请在订单列表中确认',
							icon: 'none',
							duration: 2000
						})
						// 跳转到订单列表页面
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/orders/list'
							})
						}, 2000)
						return
					}
					
					const res = await payApi.queryPayStatus(orderNo)
					consecutiveErrors = 0 // 重置连续错误计数
					
					if (res.code === 200) {
						if (res.data.paid) {
							// 支付成功
							clearInterval(this.paymentTimer)
							
							await this.updateOrderStatus(res.data)
							
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							
							// 延迟跳转到订单列表页
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/orders/list'
								})
							}, 1500)
						}
					}
				} catch (error) {
					console.error('查询支付状态失败:', error)
					consecutiveErrors++
					
					// 如果连续发生多次错误，停止轮询
					if (consecutiveErrors >= maxConsecutiveErrors) {
						clearInterval(this.paymentTimer)
						uni.showToast({
							title: '支付状态查询失败，请在订单列表中确认',
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/orders/list'
							})
						}, 2000)
					}
				}
			}, 3000) // 每3秒检查一次
		},
		
		async updateOrderStatus(paymentResult) {
			try {
				const updateData = {
					orderNo: this.orderNo,
					paymentMethod: this.selectedMethod,
					paymentTime: new Date().toISOString(),
					paymentAmount: this.amount,
					paymentStatus: 'PAID',
					transactionId: paymentResult.tradeNo || paymentResult.transactionId,
					paymentResult: paymentResult
				}
				
				await payApi.updateOrder(updateData)
			} catch (error) {
				console.error('更新订单状态失败:', error)
			}
		}
	}
}
</script>

<style>
	.payment-container {
		padding: 30rpx;
		background: #f5f6fa;
		min-height: 100vh;
	}
	
	.order-info {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.order-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.info-item:last-child {
		margin-bottom: 0;
	}
	
	.label {
		color: #666;
		font-size: 28rpx;
	}
	
	.value {
		color: #333;
		font-size: 28rpx;
	}
	
	.value.price {
		color: #ff4d4f;
		font-size: 32rpx;
		font-weight: bold;
	}

	.value.discount {
		color: #52c41a;
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.payment-methods {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 30rpx;
		display: block;
	}
	
	.method-list {
		
	}
	
	.method-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		position: relative;
	}
	
	.method-item:last-child {
		border-bottom: none;
	}
	
	.method-item.disabled {
		opacity: 0.6;
	}
	
	.method-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}
	
	.method-name {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}
	
	.status-tag {
		font-size: 24rpx;
		color: #999;
		background: #f0f0f0;
		padding: 6rpx 12rpx;
		border-radius: 20rpx;
		margin-right: 15rpx;
	}
	
	.radio-btn {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #ddd;
		position: relative;
	}
	
	.method-item.active .radio-btn {
		border-color: #1890ff;
	}
	
	.method-item.active .radio-btn::after {
		content: '';
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		background: #1890ff;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.confirm-btn {
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
		height: 90rpx;
		background: #1890ff;
		color: #fff;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 45rpx;
	}
	
	.confirm-btn:disabled {
		background: #ccc;
		opacity: 0.8;
	}

	/* 优惠券选择区域样式 */
	.coupon-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.coupon-selector {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.coupon-info {
		flex: 1;
	}

	.selected-coupon {
		display: flex;
		flex-direction: column;
	}

	.coupon-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.coupon-discount {
		font-size: 24rpx;
		color: #ff4d4f;
		font-weight: bold;
	}

	.no-coupon {

	}

	.coupon-placeholder {
		font-size: 28rpx;
		color: #999;
	}

	.arrow {
		font-size: 28rpx;
		color: #999;
	}

	/* 优惠券弹窗样式 */
	.coupon-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		align-items: flex-end;
	}

	.coupon-modal-content {
		width: 100%;
		max-height: 80vh;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.coupon-list {
		max-height: 60vh;
		padding: 20rpx;
	}

	.coupon-item {
		display: flex;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		border: 2rpx solid #eee;
		position: relative;
		overflow: hidden;
	}

	.coupon-item.active {
		border-color: #1890ff;
	}

	.coupon-item.disabled {
		opacity: 0.5;
	}

	.coupon-item::before {
		content: '';
		position: absolute;
		left: 180rpx;
		top: 0;
		bottom: 0;
		border-left: 2rpx dashed #eee;
	}

	.coupon-left {
		width: 180rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		background: #1890ff;
		color: #fff;
	}

	.coupon-left.disabled {
		background: #ccc;
	}

	.no-coupon-left {
		background: #f5f5f5 !important;
		color: #666 !important;
	}

	.no-coupon-text {
		font-size: 28rpx;
	}

	.amount {
		font-size: 48rpx;
		font-weight: bold;
	}

	.symbol {
		font-size: 32rpx;
	}

	.condition {
		font-size: 24rpx;
		margin-top: 10rpx;
		display: block;
	}

	.coupon-right {
		flex: 1;
		padding: 20rpx;
		display: flex;
		align-items: center;
	}

	.coupon-info {
		flex: 1;
		padding-right: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
		display: block;
	}

	.time {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.radio-btn {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #ddd;
		position: relative;
	}

	.radio-btn.checked {
		border-color: #1890ff;
	}

	.radio-btn.checked::after {
		content: '';
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		background: #1890ff;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.empty-tip {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 60rpx 0;
	}
</style>